<template>
  <div class="container">
    <h1>按钮组件测试</h1>
    <my-button size='small'>点我啊 笨蛋  小</my-button>
    <br><br>
    <my-button size='big'>按钮一 大</my-button>
    <br><br>
    <my-button size='massive'>按钮二 超级大</my-button>
    <br>
    <br>
    <h3>动画效果</h3>
    <!-- 默认动画：水平切换 -->
    <my-button animated size='big'>
      <div slot='hidden'>$10000</div>
      <div slot='visible'>来呀！水平方向</div>
    </my-button>
    <br/><br/>
    <!-- 垂直方向切换 -->
    <my-button size="massive" animated="vertical">
      <div slot='hidden'>$100,000</div>
      <div slot='visible'>来呀！垂直方向</div>
    </my-button>
    <br/><br/>
    <!-- 缩放切换 -->
    <my-button animated="fade" @click="hClick">
      <div slot='hidden'>$100,000</div>
      <div slot='visible'>来呀！</div>
    </my-button>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    hClick () {
      console.log(111111)
    }
  }
}
</script>
